<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番剧</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/anime.css">
</head>
<body>
    <!-- 番剧头部 start -->
    <div class="header">
        <div class="header_conter">
            <div class="header_box clearfix">
                <!-- 左边 -->
                <div class="left f_left">
                    <ul class="clearfix">
                        <li class="f_left">
                            <a href="https://www.bilibili.com/">主站</a>
                        </li>
                        <li class="f_left">
                            <a href="https://www.bilibili.com/anime/">番剧</a>
                        </li>
                        <li class="f_left">
                            <a href="https://game.bilibili.com/platform/">游戏中心</a>
                        </li>
                        <li class="f_left">
                            <a href="https://live.bilibili.com/">直播</a>
                        </li>
                        <li class="f_left">
                            <a href="https://show.bilibili.com/platform/home.html">会员购</a>
                        </li>
                        <li class="f_left">
                            <a href="https://manga.bilibili.com/">漫画</a>
                        </li>
                        <li class="f_left">
                            <a href="https://www.bilibili.com/v/game/match/">赛事</a>
                        </li>
                        <li class="f_left">
                            <a href="https://app.bilibili.com/">下载APP</a>
                        </li>
                    </ul>
                </div>
                <!-- 中部 -->
                <div class="center">
                    <form class="clearfix">
                        <input class="f_left" type="text" placeholder="UP主做了一个方舟同人游戏">
                        <button class="f_left">
                            <img src="./素材2/头部/search.png" alt="">
                        </button>
                    </form>
                </div>
                <!-- 右边 -->
                <div class="right f_right">
                    <ul class="clearfix">
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">登录</a>
                            <!-- 登录的显示和隐藏效果 -->
                            <div class="login">
                                <div class="login_box">
                                    <p class="one">登录后你可以：</p>
                                <ul class="two clearfix">
                                    <li class="f_left">免费看高清视频</li>
                                    <li class="f_left">多端同步播放记录</li>
                                    <li class="f_left">发表弹幕/评论</li>
                                    <li class="f_left">热门番剧影视看不停</li>
                                </ul>
                                <p class="three"><a href="https://passport.bilibili.com/login">立即登录</a>
                                </p>
                                <p class="four">
                                    首次使用？
                                    <a href="https://passport.bilibili.com/register/phone.html">点我注册</a>
                                </p>
                                </div>
                            </div>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">大会员</a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">消息</a>
                        </li>
                        <li class="f_left">
                            <a href="https://t.bilibili.com/?from_spm_id=333.851.top_bar.dynamic">动态</a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login?gourl=https://space.bilibili.com">收藏</a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">历史记录</a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">创作中心</a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.bilibili.com/login">投稿</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 番剧头部 end -->
    <!-- 首页 动态 热门 频道 start -->
    <div class="jietu">
        <div class="jietu_content wrapper">
            <img src="./素材2/中部/jietu.png" alt="">
        </div>
    </div>
    <!-- 首页 动态 热门 频道 end -->
    <!-- 主导航栏 start -->
    <div class="nav">
        <div class="nav_content wrapper cleafix">
            <ul class="nav_left f_left">
                <li class="f_left">
                    <a href="">全部</a>
                </li>
                <li class="f_left">
                    <a href="">连载动画</a>
                </li>
                <li class="f_left">
                    <a href="">完结动画</a>
                </li>
                <li class="f_left">
                    <a href="">资讯</a>
                </li>
                <li class="f_left">
                    <a href="">官方延伸</a>
                </li>
                <li class="f_left">
                    <a href="">新番时间表</a>
                </li>
                <li class="f_left">
                    <a href="">番剧索引</a>
                </li>
            </ul>
            <div class="nav_right f_right">
                <img src="./素材2/中部/nav_right.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- 主导航栏 end -->
    <!-- 轮播图 start -->
    <div class="banner">
        <div class="banner_content wrapper">
            <ul class="clearfix">
                <li class="f_left">
                    <img src="./素材2/中部/banner/1.jpg" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/2.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/3.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/4.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/5.png" alt="">
                </li>
            </ul>
            <!-- 两个左右按钮 -->
            <div class="btns">
                <div class="prev">上一张</div>
                <div class="next">下一张</div>
            </div>
            <!-- 5个图片导航点 -->
            <ol class="clearfix">
                <li class="f_left">
                    <img src="./素材2/中部/banner/6.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/7.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/8.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/9.png" alt="">
                </li>
                <li class="f_left">
                    <img src="./素材2/中部/banner/10.png" alt="">
                </li>
            </ol>
        </div>
    </div>
    <!-- 轮播图 end -->
    <div style="height: 2000px;background-color: #ccc; "></div>
    <!-- 固定在右侧的坚直导航栏 -->
    <div class="right_fixed">
        <ul>
            <li>直播</li>
            <li>动画</li>
            <li>番剧</li>
            <li>国创</li>
            <li>漫画</li>
            <li>音乐</li>
            <li>舞蹈</li>
            <li>游戏</li>
            <li>知识</li>
            <li>课堂</li>
            <li>科技</li>
            <li>运动</li>
            <li>汽车</li>
            <li>生活</li>
            <li>美食</li>
            <li>动物圈</li>
            <li>鬼畜</li>
            <li>时尚</li>
            <li>资讯</li>
            <li>娱乐</li>
            <li>专栏</li>
            <li>电影</li>
            <li>TV剧</li>
            <li>影视</li>
            <li>纪录片</li>
        </ul>
    </div>
    <script src="./css/anime.js"></script>
</body>
</html>